<template>
	<view class="login-container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 页面标题 -->
		<view class="page-header">
			<!-- <view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view> -->
			<view class="title">用户登录</view>
		</view>

		<!-- 登录表单 -->
		<view class="login-form">
			<!-- Logo区域 -->
			<view class="logo-section">
				<image class="logo" src="/app/icons/120x120.png" mode="aspectFit" />
				<text class="app-name">校园帮</text>
				<text class="slogan">让校园生活更便捷</text>
			</view>

			<!-- 输入表单 -->
			<view class="form-section">
				<view class="input-group">
					<view class="input-item">
						<text class="label">手机号</text>
						<input 
							class="input" 
							type="number" 
							placeholder="请输入手机号" 
							v-model="loginForm.phone"
							maxlength="11"
							autocomplete="off"
							autocorrect="off"
							autocapitalize="off"
							spellcheck="false"
						/>
					</view>
					
					<view class="input-item">
						<text class="label">密码</text>
						<input 
							class="input" 
							:type="showPassword ? 'text' : 'password'" 
							placeholder="请输入密码" 
							v-model="loginForm.password"
							autocomplete="off"
							autocorrect="off"
							autocapitalize="off"
							spellcheck="false"
						/>
						<view class="password-toggle" @click="togglePassword">
							<text class="toggle-icon">{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
						</view>
					</view>
				</view>

				<!-- 滑动解锁组件 -->
				<view class="slide-unlock-section">
					<view class="slide-container" :class="{ 'slide-success': isSlideSuccess }">
						<view class="slide-track">
							<view class="slide-text">{{ slideText }}</view>
							<view
								class="slide-button"
								:class="{ 'slide-success': isSlideSuccess }"
								:style="{ left: slideButtonLeft + 'px' }"
								@touchstart="onTouchStart"
								@touchmove="onTouchMove"
								@touchend="onTouchEnd"
							>
								<text class="slide-icon">{{ slideIcon }}</text>
							</view>
						</view>
					</view>
					<!-- 提示信息 -->
					<view class="slide-tip" v-if="!isSlideSuccess">
						<text class="tip-text">请先完成滑动验证才能登录</text>
					</view>
					<!-- 调试信息 -->
					<view class="debug-info" style="font-size: 20rpx; color: #999; text-align: center; margin-top: 10rpx;">
						<text>轨道宽度: {{ slideTrackWidth }}px, 按钮位置: {{ slideButtonLeft }}px</text>
					</view>
				</view>

				<!-- 登录按钮 -->
				<view class="login-actions">
					<button class="login-btn" @click="handleLogin" :disabled="!canLogin || !isSlideSuccess">
						登录
					</button>
					
					<view class="other-actions">
						<text class="action-link" @click="goToRegister">注册账号</text>
						<text class="action-link" @click="goToForgetPassword">忘记密码</text>
					</view>
					
					<!-- Token状态切换按钮 -->
					<view class="token-toggle" @click="toggleTokenStatus">
						<text class="toggle-text">{{ showTokenStatus ? '隐藏' : '显示' }}Token状态</text>
					</view>
				</view>

				<!-- Token状态显示 -->
				<view class="token-status" v-if="showTokenStatus">
					<view class="status-title">Token状态</view>
					<view class="status-item">
						<text class="status-label">Access Token:</text>
						<text class="status-value" :class="getTokenStatusClass('access')">
							{{ getTokenStatusText('access') }}
						</text>
					</view>
					<view class="status-item">
						<text class="status-label">Refresh Token:</text>
						<text class="status-value" :class="getTokenStatusClass('refresh')">
							{{ getTokenStatusText('refresh') }}
						</text>
					</view>
                    <view class="status-item">
                        <text class="status-label">剩余时间:</text>
                        <text class="status-value">{{ accessTokenRemainingText }}</text>
                    </view>
				</view>

				<!-- 第三方登录 -->
				<view class="third-party-login">
					<view class="divider">
						<view class="line"></view>
						<text class="divider-text">其他登录方式</text>
						<view class="line"></view>
					</view>
					
					<view class="third-party-buttons">
						<view class="third-party-btn wechat" @click="wechatLogin">
							<text class="btn-icon">💬</text>
							<text class="btn-text">微信登录</text>
						</view>
						<view class="third-party-btn qq" @click="qqLogin">
							<text class="btn-icon">🐧</text>
							<text class="btn-text">QQ登录</text>
						</view>
						<view class="third-party-btn face" @click="faceLogin">
							<text class="btn-icon">👤</text>
							<text class="btn-text">人脸识别</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部协议 -->
		<view class="footer-agreement">
			<text class="agreement-text">
				登录即表示同意
				<text class="link">《用户协议》</text>
				和
				<text class="link">《隐私政策》</text>
			</text>
		</view>
		
		<!-- 安全区域占位 -->
		<view class="safe-area-bottom" :style="{ height: safeAreaBottom + 'px' }"></view>
		
		<!-- QQ登录弹窗 -->
		<QQLoginModal 
			:visible="showQQModal" 
			@close="showQQModal = false"
			@success="handleQQLoginSuccess"
		/>
		
		<!-- 微信登录弹窗 -->
		<WeChatLoginModal 
			:visible="showWeChatModal" 
			@close="showWeChatModal = false"
			@success="handleWeChatLoginSuccess"
		/>
		
		<!-- 人脸识别登录弹窗 -->
		<FaceLoginModal 
			:visible="showFaceModal" 
			@close="showFaceModal = false"
			@success="handleFaceLoginSuccess"
		/>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useUserStore } from '@/stores'
import { http } from '@/utils/request'
import QQLoginModal from '../components/QQLoginModal.vue'
import WeChatLoginModal from '../components/WeChatLoginModal.vue'
import FaceLoginModal from '../components/FaceLoginModal.vue'

const userStore = useUserStore()

// 系统信息
const systemInfo = ref<any>({})
const statusBarHeight = ref(0)
const safeAreaBottom = ref(0)
const screenWidth = ref(375)
const screenHeight = ref(667)

// 登录表单数据
const loginForm = ref({
	phone: '',
	password: ''
})

// 密码显示状态
const showPassword = ref(false)

// 是否显示token状态
const showTokenStatus = ref(false)

// QQ登录弹窗显示状态
const showQQModal = ref(false)

// 微信登录弹窗显示状态
const showWeChatModal = ref(false)

// 人脸识别登录弹窗显示状态
const showFaceModal = ref(false)

// 滑动解锁相关
const slideText = ref('向右滑动以验证')
const slideIcon = ref('👉')
const slideButtonLeft = ref(0)
const slideTrackWidth = ref(0)
const isSlideSuccess = ref(false)
const isDragging = ref(false)
const startX = ref(0)
const startLeft = ref(0)

const login = (data: { phone: string; password: string }) => {
  return http.post('/auth/login', data)
}
// 滑动解锁相关方法
const onTouchStart = (e: TouchEvent) => {
	if (isSlideSuccess.value) return
	
	e.preventDefault() // 防止默认触摸行为
	isDragging.value = true
	startX.value = e.touches[0].clientX
	startLeft.value = slideButtonLeft.value
}


const onTouchMove = (e: TouchEvent) => {
	if (isSlideSuccess.value || !isDragging.value) return
	
	e.preventDefault() // 防止默认触摸行为
	const currentX = e.touches[0].clientX
	const deltaX = currentX - startX.value
	const newLeft = startLeft.value + deltaX
	const maxSlide = slideTrackWidth.value - 100 // 按钮宽度约100px
	
	// 限制滑动范围在0到最大滑动距离之间
	slideButtonLeft.value = Math.max(0, Math.min(newLeft, maxSlide))
}

const onTouchEnd = (e: TouchEvent) => {
	if (isSlideSuccess.value || !isDragging.value) return
	
	e.preventDefault() // 防止默认触摸行为
	isDragging.value = false
	const currentX = slideButtonLeft.value
	const maxSlide = slideTrackWidth.value - 100 // 按钮宽度约100px
	
	// 如果滑动超过最大距离的80%，则判定为成功
	if (currentX >= maxSlide * 0.8) {
		isSlideSuccess.value = true
		slideText.value = '验证成功！'
		slideIcon.value = '✅'
		// 滑动到最右侧
		slideButtonLeft.value = maxSlide
		
		// 添加成功提示音效（可选）
		// uni.vibrateShort() // 震动反馈
		
		setTimeout(() => {
			isSlideSuccess.value = false
			slideText.value = '向右滑动以验证'
			slideIcon.value = '👉'
			slideButtonLeft.value = 0
		}, 2000) // 2秒后恢复
	} else {
		// 滑动不足，回到起始位置
		slideButtonLeft.value = 0
	}
}

// 获取滑动轨道宽度
const getSlideTrackWidth = () => {
	// 使用nextTick确保DOM已渲染
	nextTick(() => {
		const query = uni.createSelectorQuery()
		query.select('.slide-container').boundingClientRect((rect: any) => {
			if (rect) {
				slideTrackWidth.value = rect.width
			}
		}).exec()
	})
}

// 计算属性：是否可以登录
const canLogin = computed(() => {
	const can = loginForm.value.phone.length === 11 && loginForm.value.password.length >= 6
	return can
})

// 获取token状态文本
const getTokenStatusText = (type: 'access' | 'refresh') => {
	if (type === 'access') {
		if (userStore.isAccessTokenExpired()) return '已过期'
		if (userStore.needRefreshToken()) return '即将过期'
		return '有效'
	} else {
		if (userStore.isRefreshTokenExpired()) return '已过期'
		return '有效'
	}
}

// 获取token状态样式类
const getTokenStatusClass = (type: 'access' | 'refresh') => {
	if (type === 'access') {
		if (userStore.isAccessTokenExpired()) return 'status-expired'
		if (userStore.needRefreshToken()) return 'status-warning'
		return 'status-valid'
	} else {
		if (userStore.isRefreshTokenExpired()) return 'status-expired'
		return 'status-valid'
	}
}

// 实时剩余时间：依赖 nowMs，每秒自动刷新
const nowMs = ref(Date.now())
const accessTokenRemainingText = computed(() => {
    if (userStore.isAccessTokenExpired()) return '已过期'
    const remaining = Math.max(0, userStore.accessTokenExpires - nowMs.value)
    const minutes = Math.floor(remaining / 60000)
    const seconds = Math.floor((remaining % 60000) / 1000)
    const ss = String(seconds).padStart(2, '0')
    return `${minutes}分${ss}秒`
})

// 获取系统信息
const getSystemInfo = () => {
	// #ifdef APP-PLUS
	// @ts-ignore
	plus.screen.getCurrentSize((width: number, height: number) => {
		screenWidth.value = width
		screenHeight.value = height
	})
	// #endif
	
	// #ifdef MP-WEIXIN
	// @ts-ignore
	uni.getSystemInfo({
		success: (res: any) => {
			systemInfo.value = res
			statusBarHeight.value = res.statusBarHeight || 0
			safeAreaBottom.value = res.safeAreaInsets?.bottom || 0
			screenWidth.value = res.screenWidth || 375
			screenHeight.value = res.screenHeight || 667
		}
	})
	// #endif
	
	// #ifdef H5
	// H5环境获取屏幕信息
	screenWidth.value = window.innerWidth
	screenHeight.value = window.innerHeight
	statusBarHeight.value = 0
	safeAreaBottom.value = 0
	// #endif
}

// 计算响应式尺寸
const getResponsiveSize = (baseSize: number) => {
	const baseWidth = 375 // 设计稿基准宽度
	const scale = screenWidth.value / baseWidth
	return Math.round(baseSize * scale)
}

// 切换密码显示
const togglePassword = () => {
	showPassword.value = !showPassword.value
}

// 切换token状态显示
const toggleTokenStatus = () => {
	showTokenStatus.value = !showTokenStatus.value
}

// 处理登录
const handleLogin = async () => {
	if (!canLogin.value) {
		uni.showToast({
			title: '请填写完整的登录信息',
			icon: 'none'
		})
		return
	}
	
	if (!isSlideSuccess.value) {
		uni.showToast({
			title: '请先完成滑动验证',
			icon: 'none'
		})
		return
	}

	// 显示加载状态
	uni.showLoading({ title: '登录中...' })
	
	try {
		// 调用后端登录接口（已由请求拦截器返回 data 字段）
		const data: any = await login({ phone: loginForm.value.phone, password: loginForm.value.password })

		// 登录成功，设置双token
		const { accessToken, refreshToken, userInfo, expiresIn, refreshExpiresIn } = data
		
		// 设置双token到store
		userStore.setAccessToken(accessToken, expiresIn || 15 * 60) // 默认15分钟
		userStore.setRefreshToken(refreshToken, refreshExpiresIn || 7 * 24 * 60 * 60) // 默认7天
		
		// 更新用户信息到store
		userStore.setUserInfo(userInfo as any)
		
		// 保存头像到本地存储
		uni.setStorageSync('userAvatar', userInfo.avatar)
		
		// 保存登录时间
		uni.setStorageSync('loginTime', Date.now())
		
		uni.showToast({
			title: '登录成功！',
			icon: 'success'
		})
		
		// 跳转到"我的"tab页
		setTimeout(() => {
			uni.switchTab({ url: '/pages/my/my' })
		}, 600)
		
	} catch (error) {
		// 检查是否是token过期错误，完全静默处理
		const errorMsg = (error as any)?.errMsg || (error as any)?.message || error || ''
		if (errorMsg.includes('Token已过期') || 
			errorMsg.includes('token已过期') || 
			errorMsg.includes('Token expired') ||
			errorMsg.includes('401') ||
			errorMsg.includes('Unauthorized')) {
			// token过期时完全静默处理，不显示任何日志或提示
			return
		}
		
		// 其他错误才显示提示
		uni.showToast({
			title: '登录失败，请重试',
			icon: 'none'
		})
	} finally {
		// 确保在所有情况下都隐藏loading
		uni.hideLoading()
	}
}

// 已移除模拟登录API，改为真实后端接口调用

// 微信登录
const wechatLogin = () => {
	showWeChatModal.value = true
}

// QQ登录
const qqLogin = () => {
	showQQModal.value = true
}

// 人脸识别登录
const faceLogin = () => {
	showFaceModal.value = true
}

// QQ登录成功处理
const handleQQLoginSuccess = (userInfo: any) => {
	// 设置用户信息到store
	userStore.setUserInfo({
		...userInfo,
		// 确保昵称字段正确设置
		nickName: userInfo.nickName || userInfo.nickname,
		nickname: userInfo.nickName || userInfo.nickname
	})
	
	// 为QQ登录设置一个模拟的token，确保登录状态正确
			userStore.setAccessToken('mock_qq_token_' + Date.now(), 15 * 60) // 15分钟有效期
	userStore.setRefreshToken('mock_qq_refresh_' + Date.now(), 7 * 24 * 60 * 60) // 7天有效期
	
	// 保存用户头像到本地存储（使用默认头像）
	uni.setStorageSync('userAvatar', userInfo.avatar || '/app/icons/120x120.png')
	
	// 保存登录时间
	uni.setStorageSync('loginTime', Date.now())
}

// 微信登录成功处理
const handleWeChatLoginSuccess = (userInfo: any) => {
	// 设置用户信息到store
	userStore.setUserInfo({
		...userInfo,
		// 确保昵称字段正确设置
		nickName: userInfo.nickName || userInfo.nickname,
		nickname: userInfo.nickName || userInfo.nickname
	})
	
	// 为微信登录设置一个模拟的token，确保登录状态正确
	userStore.setAccessToken('mock_wechat_token_' + Date.now(), 15 * 60) // 15分钟有效期
	userStore.setRefreshToken('mock_wechat_refresh_' + Date.now(), 7 * 24 * 60 * 60) // 7天有效期
	
	// 保存用户头像到本地存储（使用默认头像）
	uni.setStorageSync('userAvatar', userInfo.avatar || '/app/icons/120x120.png')
	
	// 保存登录时间
	uni.setStorageSync('loginTime', Date.now())
}

// 人脸识别登录成功处理
const handleFaceLoginSuccess = (userInfo: any) => {
	// 设置用户信息到store
	userStore.setUserInfo({
		...userInfo,
		// 确保昵称字段正确设置
		nickName: userInfo.nickName || userInfo.nickname,
		nickname: userInfo.nickName || userInfo.nickname
	})
	
			// 为人脸识别登录设置一个模拟的token，确保登录状态正确
		userStore.setAccessToken('mock_face_token_' + Date.now(), 15 * 60) // 15分钟有效期
	userStore.setRefreshToken('mock_face_refresh_' + Date.now(), 7 * 24 * 60 * 60) // 7天有效期
	
	// 保存用户头像到本地存储（使用默认头像）
	uni.setStorageSync('userAvatar', userInfo.avatar || '/app/icons/120x120.png')
	
	// 保存登录时间
	uni.setStorageSync('loginTime', Date.now())
}

// 跳转注册页面
const goToRegister = () => {
	uni.navigateTo({ 
		url: '/pages/my/register/register',
		fail: (err) => {
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			})
		}
	})
}

// 跳转忘记密码页面
const goToForgetPassword = () => {
	uni.showToast({
		title: '忘记密码功能开发中...',
		icon: 'none'
	})
}

// 返回上一页
// const goBack = () => {
// 	uni.navigateBack()
// }

// 检查token状态
const checkTokenStatus = () => {
	// 只有在有有效token且未过期时才显示token状态
	if (userStore.accessToken && !userStore.isAccessTokenExpired()) {
		showTokenStatus.value = true
	} else {
		// 如果没有token或token已过期，隐藏token状态显示
		showTokenStatus.value = false
	}
}

// 页面加载时获取系统信息
onMounted(() => {
	getSystemInfo()
	
	// 检查当前token状态
	checkTokenStatus()
	
	// 获取滑动轨道宽度
	getSlideTrackWidth()
	
    // 每秒刷新一次时间源，驱动剩余时间计算
    const tokenTimer = setInterval(() => {
        nowMs.value = Date.now()
        
        // 检查token状态，如果过期则隐藏状态显示
        if (userStore.isAccessTokenExpired() && showTokenStatus.value) {
            showTokenStatus.value = false
        }
    }, 1000)
	
	// 监听屏幕旋转（H5环境）
	// #ifdef H5
	const handleResize = () => {
		screenWidth.value = window.innerWidth
		screenHeight.value = window.innerHeight
		// 重新获取滑动轨道宽度
		getSlideTrackWidth()
	}
	window.addEventListener('resize', handleResize)
	// #endif
	
	// 清理定时器和事件监听器
	onUnmounted(() => {
		clearInterval(tokenTimer)
		// #ifdef H5
		window.removeEventListener('resize', handleResize)
		// #endif
	})
})
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
}

.status-bar {
	width: 100%;
	background: transparent;
	flex-shrink: 0;
}

.page-header {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	position: relative;
	flex-shrink: 0;
}

.back-btn {
	width: 50rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	backdrop-filter: blur(10rpx);
	z-index: 10;
}

.back-icon {
	font-size: 28rpx;
	color: #fff;
}

.title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-right: 50rpx;
}

.slide-unlock-section {
	padding: 20rpx 0;
	margin-bottom: 25rpx;
	flex-shrink: 0;
}

.slide-tip {
	text-align: center;
	margin-top: 15rpx;
}

.tip-text {
	font-size: 24rpx;
	color: #ff6b6b;
	font-weight: 500;
}

/* 添加滑动轨道的渐变效果 */
.slide-container {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	border-radius: 40rpx;
	overflow: hidden;
	position: relative;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	border: 2rpx solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.slide-container:hover {
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
}

/* 添加滑动成功时的轨道效果 */
.slide-container.slide-success {
	background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
	border-color: rgba(76, 175, 80, 0.3);
	animation: successPulse 0.6s ease-in-out;
}

@keyframes successPulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}

.slide-track {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.slide-text {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	padding-left: 120rpx; /* 为滑动按钮留出空间 */
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
}

.slide-container.slide-success .slide-text {
	color: #2e7d32;
	font-weight: 600;
}

.slide-button {
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	user-select: none;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.slide-button:active {
	transform: scale(0.95);
	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
}

.slide-button.slide-success {
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	left: 100%;
	transform: translateX(-100%);
	box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.4);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-icon {
	font-size: 40rpx;
	color: #fff;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

.slide-button.slide-success .slide-icon {
	color: #fff;
	animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10rpx);
	}
	60% {
		transform: translateY(-5rpx);
	}
}

.login-form {
	flex: 1;
	padding: 20rpx 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 0;
	overflow: visible;
}

.logo-section {
	text-align: center;
	margin-bottom: 40rpx;
	flex-shrink: 0;
}

.logo {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-bottom: 15rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
}

.app-name {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 8rpx;
}

.slogan {
	display: block;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.form-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20rpx;
	padding: 30rpx 25rpx;
	backdrop-filter: blur(20rpx);
	box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.input-group {
	margin-bottom: 25rpx;
}

.input-item {
	position: relative;
	margin-bottom: 20rpx;
}

.label {
	display: block;
	font-size: 26rpx;
	color: #333;
	margin-bottom: 10rpx;
	font-weight: 500;
}

.input {
	width: 100%;
	height: 70rpx;
	padding: 0 18rpx;
	border: 2rpx solid #e1e5e9;
	border-radius: 10rpx;
	font-size: 28rpx;
	background: #fff;
	box-sizing: border-box;
	
	&:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 3rpx rgba(102, 126, 234, 0.1);
	}
}

.password-toggle {
	position: absolute;
	right: 18rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 50rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.toggle-icon {
	font-size: 28rpx;
	color: #999;
}

.login-actions {
	margin-bottom: 25rpx;
	display: flex;
	flex-direction: column; /* Changed to column to stack buttons */
	align-items: center; /* Center buttons */
}

.login-btn {
	width: 100%;
	height: 75rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 10rpx;
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	transition: all 0.3s ease;
	
	&:disabled {
		background: #ccc;
		cursor: not-allowed;
		opacity: 0.6;
		transform: none;
	}
	
	&:not(:disabled) {
		&:active {
			transform: scale(0.98);
		}
		
		&:hover {
			box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
		}
	}
}

.other-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%; /* Ensure other-actions takes full width */
	margin-bottom: 20rpx; /* Add some space below other-actions */
}

.action-link {
	font-size: 24rpx;
	color: #667eea;
	cursor: pointer;
	
	&:active {
		opacity: 0.7;
	}
}

.token-toggle {
	width: 100%;
	height: 75rpx;
	background: #f0f0f0;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #333;
	cursor: pointer;
	
	&:active {
		opacity: 0.7;
	}
}

.toggle-text {
	font-weight: bold;
}

.token-status {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 10rpx;
	border: 1rpx solid #e9ecef;
}

.status-title {
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
	text-align: center;
}

.status-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
	padding: 8rpx 0;
	border-bottom: 1rpx solid #eee;
}

.status-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.status-label {
	font-size: 24rpx;
	color: #666;
}

.status-value {
	font-size: 24rpx;
	font-weight: 500;
}

.status-valid {
	color: #28a745;
}

.status-warning {
	color: #ffc107;
}

.status-expired {
	color: #dc3545;
}

.third-party-login {
	margin-top: 25rpx;
}

.divider {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.line {
	flex: 1;
	height: 1rpx;
	background: #e1e5e9;
}

.divider-text {
	padding: 0 15rpx;
	font-size: 22rpx;
	color: #999;
}

.third-party-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15rpx;
}

.third-party-btn {
	flex: 1;
	height: 65rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2rpx solid #e1e5e9;
	border-radius: 10rpx;
	background: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.95);
	}
	
	&.wechat {
		border-color: #07c160;
		
		&:hover {
			background: #f0f9f0;
		}
	}
	
	&.qq {
		border-color: #12b7f5;
		
		&:hover {
			background: #f0f9ff;
		}
	}
	
	&.face {
		border-color: #ff6b35;
		
		&:hover {
			background: #fff5f0;
		}
	}
}

.btn-icon {
	font-size: 22rpx;
	margin-bottom: 3rpx;
}

.btn-text {
	font-size: 20rpx;
	color: #333;
}

.footer-agreement {
	text-align: center;
	padding: 20rpx 30rpx;
	flex-shrink: 0;
}

.agreement-text {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.4;
}

.link {
	color: #fff;
	text-decoration: underline;
	cursor: pointer;
	
	&:active {
		opacity: 0.7;
	}
}

.safe-area-bottom {
	width: 100%;
	background: transparent;
	flex-shrink: 0;
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
	.slide-unlock-section {
		padding: 15rpx 20rpx;
		margin-bottom: 15rpx;
	}
	
	.slide-container {
		height: 70rpx;
		border-radius: 35rpx;
	}
	
	.slide-button {
		width: 90rpx;
		height: 90rpx;
	}
	
	.slide-text {
		font-size: 24rpx;
		padding-left: 110rpx;
	}
	
	.slide-icon {
		font-size: 36rpx;
	}
	
	.login-form {
		padding: 15rpx 20rpx;
	}
	
	.logo-section {
		margin-bottom: 30rpx;
	}
	
	.logo {
		width: 70rpx;
		height: 70rpx;
	}
	
	.app-name {
		font-size: 32rpx;
	}
	
	.form-section {
		padding: 25rpx 20rpx;
	}
	
	.input-group {
		margin-bottom: 20rpx;
	}
	
	.input-item {
		margin-bottom: 15rpx;
	}
	
	.input {
		height: 65rpx;
		font-size: 26rpx;
	}
	
	.login-btn {
		height: 70rpx;
		font-size: 28rpx;
	}
}

@media screen and (min-width: 414px) {
	.slide-unlock-section {
		padding: 25rpx 35rpx;
		margin-bottom: 25rpx;
	}
	
	.slide-container {
		height: 90rpx;
		border-radius: 45rpx;
	}
	
	.slide-button {
		width: 110rpx;
		height: 110rpx;
	}
	
	.slide-text {
		font-size: 32rpx;
		padding-left: 130rpx;
	}
	
	.slide-icon {
		font-size: 44rpx;
	}
	
	.login-form {
		padding: 25rpx 35rpx;
	}
	
	.logo-section {
		margin-bottom: 50rpx;
	}
	
	.logo {
		width: 90rpx;
		height: 90rpx;
	}
	
	.app-name {
		font-size: 40rpx;
	}
	
	.form-section {
		padding: 35rpx 30rpx;
	}
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
	.slide-unlock-section {
		padding: 15rpx 25rpx;
		margin-bottom: 15rpx;
	}
	
	.slide-container {
		height: 60rpx;
		border-radius: 30rpx;
	}
	
	.slide-button {
		width: 80rpx;
		height: 80rpx;
	}
	
	.slide-text {
		font-size: 22rpx;
		padding-left: 100rpx;
	}
	
	.slide-icon {
		font-size: 32rpx;
	}
	
	.login-container {
		height: 100vh;
	}
	
	.login-form {
		padding: 15rpx 25rpx;
		justify-content: flex-start;
	}
	
	.logo-section {
		margin-bottom: 25rpx;
	}
	
	.logo {
		width: 60rpx;
		height: 60rpx;
	}
	
	.app-name {
		font-size: 28rpx;
	}
	
	.slogan {
		font-size: 20rpx;
	}
	
	.form-section {
		padding: 25rpx 20rpx;
	}
	
	.input-group {
		margin-bottom: 15rpx;
	}
	
	.input-item {
		margin-bottom: 12rpx;
	}
	
	.input {
		height: 60rpx;
		font-size: 24rpx;
	}
	
	.login-btn {
		height: 65rpx;
		font-size: 26rpx;
	}
}

/* 大屏幕适配 */
@media screen and (min-width: 768px) {
	.login-container {
		max-width: 600rpx;
		margin: 0 auto;
		height: 100vh;
	}
	
	.form-section {
		max-width: 500rpx;
		margin: 0 auto;
	}
}

/* 超小屏幕适配 */
@media screen and (max-height: 600px) {
	.logo-section {
		margin-bottom: 20rpx;
	}
	
	.logo {
		width: 60rpx;
		height: 60rpx;
	}
	
	.app-name {
		font-size: 28rpx;
	}
	
	.slogan {
		font-size: 20rpx;
	}
	
	.form-section {
		padding: 20rpx 20rpx;
	}
	
	.input-group {
		margin-bottom: 15rpx;
	}
	
	.input-item {
		margin-bottom: 12rpx;
	}
	
	.input {
		height: 60rpx;
		font-size: 24rpx;
	}
	
	.login-btn {
		height: 65rpx;
		font-size: 26rpx;
	}
	
	.third-party-login {
		margin-top: 15rpx;
	}
	
	.footer-agreement {
		padding: 15rpx 30rpx;
	}
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
	.form-section {
		background: rgba(30, 30, 30, 0.95);
	}
	
	.input {
		background: #2a2a2a;
		color: #fff;
		border-color: #444;
		
		&:focus {
			border-color: #667eea;
		}
	}
	
	.label {
		color: #fff;
	}
	
	.third-party-btn {
		background: #2a2a2a;
		border-color: #444;
		
		.btn-text {
			color: #fff;
		}
	}
}
</style>
